<template>
	<view>
		<view class="header">
			<text>全部(20)</text>
			<text>降价(4)</text>
			<text>常卖(2)</text>
			<text>分类</text>
		</view>

		<view class="ziying">
			<u-checkbox-group>
				<text>小U自营</text>
				<view class="">
					<text style="margin-left: 340rpx;">已免运费 | </text>
					<text style="color: #FF6600; margin-left:20rpx">领券</text>
				</view>
			</u-checkbox-group>
		</view>
		<view class="shop" v-if="cartlist.length > 0">
			<u-swipe-action v-for="(item,index) in cartlist" :key="item.id">
				<u-swipe-action-item :options="options1" @click="del(item.id)">
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<u-checkbox-group @change="checkone(index)">
								<u-checkbox :checked="item.checked"></u-checkbox>
								<view class="">
									<image :src=" 'http://localhost:3001'+item.img" mode=""></image>
								</view>
								<view class="con">
									<text>{{item.goodsname}}</text>
									<view class="">
										<text style="color: #FF6600;">￥{{item.price.toFixed(2)}}</text>
									</view>
								</view>
								<view class="num">
									<!-- <u-number-box v-model="item.num" @change='changeNum(item.id)'></u-number-box> -->
									<text @click="des(index,item.id)">-</text>
									<text>{{item.num}}</text>
									<text @click="add(index,item.id)">+</text>
								</view>
							</u-checkbox-group>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<view class="kong" v-else>
			购物车空空如也，快去买买买~
		</view>
		<view class="footer">
			<u-checkbox-group @change="AllCheck">
				<u-checkbox :checked="checkAll"></u-checkbox>
			</u-checkbox-group>
			<text style="padding: 40rpx 50rpx 0 0; ">全选</text>
			<view class="price" style="width: 280rpx;">
				<view>
					合计：<text style="color: #FF6600;">￥{{allPrice}}</text>
				</view>
				<view style="color: #999999;">
					不含运费，已优惠 ￥0
				</view>
			</view>
			<view class="jiesuan" @click="toOrder">
				去结算（ {{allNum}} 件）
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cartList,
		delcart,
		editcart
	} from '../../request/app.js'
	export default {
		data() {
			return {
				checkAll: false,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				cartlist: []
			}
		},
		onShow() {
			this.getList(),
				this.checkAll = false
		},
		methods: {
			getList() {
				cartList({
					uid: uni.getStorageSync('userinfo').uid,
				}, {
					authorization: uni.getStorageSync('userinfo').token
				}).then(res => {
					console.log(res, '购物车列表');
					if (res.data.code == 200) {
						this.cartlist = res.data.list || []
						// console.log(this.cartlist);
						this.cartlist.map(item => {
							this.$set(item, 'checked', false)
						})
					}
				})
			},
			del(id) {
				delcart({
					id
				}, {
					authorization: uni.getStorageSync('userinfo').token
				}).then(res => {
					console.log(res, '删除');
					this.getList()
				})
			},
			des(i, id) {
				if (this.cartlist[i].num <= 1) {
					this.cartlist[i].num = 1
					uni.showToast({
						title: '最少数量为1',
						icon: 'error'
					})
					return
				} else {
					editcart({
						id,
						type: 1
					}, {
						authorization: uni.getStorageSync('userinfo').token
					}).then(res => {
						console.log(res, '购物车减减');
						if (res.data.code == 200) {
							this.cartlist[i].num--
						}
					})
				}

			},
			add(i, id) {
				editcart({
					id,
					type: 2
				}, {
					authorization: uni.getStorageSync('userinfo').token
				}).then(res => {
					console.log(res, '购物车加加');
					if (res.data.code == 200) {
						this.cartlist[i].num++
					}
				})
			},
			AllCheck() {
				this.checkAll = !this.checkAll
				this.cartlist.map(item => {
					item.checked = this.checkAll
				})
			},
			checkone(i) {
				this.cartlist[i].checked = !this.cartlist[i].checked
				this.checkAll = this.cartlist.every((item) => item.checked)
			},
			toOrder() {
				if (this.cartlist.some(item => item.checked)) {
					let num = 0
					let val = ''
					let arr = []
					this.cartlist.map(item => {
						if (item.checked) {
							num += item.num
							val += `,${item.id}`
							arr.push(item)
						}
					});
					let orderInfo = {
						countmoney: this.allPrice,
						countnumber: num,
						idstr: val.slice(1)
					};
					uni.setStorageSync('orderInfo', orderInfo)
					uni.setStorageSync('arr', arr)
					uni.navigateTo({
						url: '/pages/order/order'
					})
				} else {
					uni.showToast({
						title: '至少选择一件商品去结算~'
					})
				}
			}
		},
		computed: {
			allPrice() {
				let sum = 0
				this.cartlist.map(item => {
					if (item.checked) {
						sum += item.price * item.num
					}
				})
				return sum.toFixed(2)
			},
			allNum() {
				let num = 0
				this.cartlist.map(item => {
					if (item.checked) {
						num += item.num
					}
				})
				return num
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
		position: relative;
	}

	.header {
		background-color: #FF6633;
		color: #fff;
		display: flex;
		justify-content: space-around;
	}

	.ziying {
		background-color: #fff;
	}

	.shop {
		margin-top: 20rpx;
		margin-bottom: 200rpx;
	}

	.shop image {
		width: 250rpx;
		height: 255rpx;
		margin-left: -10rpx;
	}

	.shop .con {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}


	.shop .num text:nth-child(1),
	.shop .num text:nth-child(3) {
		font-size: 50rpx;
	}

	.shop .num text:nth-child(2) {
		font-weight: normal;
		width: 80rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		display: inline-block;
		background-color: #eee;
	}

	.shop .num {
		right: 50rpx;
		bottom: 50rpx;
		position: absolute;
	}

	/* #ifdef H5 */
	.footer {
		position: fixed;
		display: flex;
		bottom: 100rpx;
		background-color: #fff;
		width: 100%;
		z-index: 99;
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	.footer {
		position: fixed;
		display: flex;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		z-index: 99;
	}

	/* #endif */


	.footer .jiesuan {
		width: 250rpx;
		background-color: #FF6633;
		color: #fff;
		text-align: center;
		padding-top: 40rpx;
		box-sizing: border-box;
		margin-left: 50rpx;
	}
</style>
